/**
* @file 搜索组件
* @author renzhiqiang
* @date 2017-01-20
*/
<template>
  <div>
    <header id="header" class="mui-bar mui-bar-nav" style="position: fixed">
      <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left" @tap="select('0')"></a>
      <h1 class="mui-title" @tap='pop()'>{{configure.title||'暂无主题'}}
        <span class="mui-icon" :class="[isOpen ? 'crm-solid-lower-triangle' : 'crm-solid-up-triangle']" v-if="isShow"></span></h1>
      <a v-for="item in configure.ele" class="mui-icon mui-pull-right" :class="item.class" v-show="item.show"  @tap="click($index)" v-text="item.text"></a>
    </header>
    <!--<ul class="myCustomersHide mui-card" v-show="!isOpen" v-if="isShow">-->
      <!--<li class="mui-icon" v-for="item in configure.select.ele" :class="item.class" @tap="select($index)" v-text="item.text"></li>-->
    <!--</ul>-->
  </div>
</template>
<style lang="less" rel="stylesheet/less">
  @import 'header.css';
</style>
<script>
  export default{
    data () {
      return {
//        isOpen: false, // 是否展示下拉栏弹出
        isShow: false  // 头部点击是否存在
      };
    },
    props: {
      configure: {} //组件配置属性
    },
    methods: {
      click: function (evt) { // 头部左右两侧点击事件 回调函数
        if(typeof this.configure.ele[evt].fn === 'function' ){
          this.configure.ele[evt].fn.bind(this)();
        }
      },
      select: function (evt) { // 头部下拉框点击事件 回调函数
        if(this.configure.select){  // 有下拉框才点击有效
          this.isOpen =! this.isOpen
          if(typeof this.configure.select.ele[evt].fn === 'function' ){
            this.configure.select.ele[evt].fn.bind(this)(evt);
          }
        } else if (evt == 0) {
          this.configure.ele[0].fn.bind(this)();
        }
      },
      pop () { // 下拉框控打开关闭控制
        if(!!this.configure.select){
          this.isOpen =! this.isOpen
        }
      }
    },
    created:function () {
    },
    ready: function () {
      console.info(this.configure);
      this.isOpen = !!this.configure.select;
      this.isShow = !!this.configure.select;
    }
  }
</script>
